<template>
  <el-page-header content='detail' />
  <el-row>
    <el-tabs v-model='activeName' class='demo-tabs' @tab-click='handleClick'>
      <el-tab-pane label='集群概览' name='overview'>
        <ClusterOverView />
      </el-tab-pane>
      <el-tab-pane label='Topic信息' name='topic'>Config</el-tab-pane>
      <el-tab-pane label='Broker信息' name='broker'>Role</el-tab-pane>
      <el-tab-pane label='消费组信息' name='consumer'>Task</el-tab-pane>
      <el-tab-pane label='Region信息' name='region'>Task</el-tab-pane>
      <el-tab-pane label='逻辑集群信息' name='logicCluster'>Task</el-tab-pane>
      <el-tab-pane label='Controller信息' name='controller'>Task</el-tab-pane>
    </el-tabs>
  </el-row>

</template>
<script lang='ts' setup>
import { ref } from 'vue';
import ClusterOverView from '@/views/kafka-admin/cluster/ClusterOverView.vue';

const activeName = ref('overview');

const handleClick = (tab: string, event: Event) => {
  console.log(tab, event);
};
</script>
<style scoped>

</style>
